<template>
    <Page class="basic company">
        <template #header>
            <EdSelect :selectParams="data.selectNoticeTypeParams" v-model="params.noticeType"></EdSelect>
            <el-input v-model="params.title" placeholder="请输入公告标题" />
            <el-input v-model="params.creator" placeholder="请输入创建者" />
            <EdSelect :selectParams="data.selecProjectParams" v-model="params.villageId"></EdSelect>
            <EdSelect :selectParams="data.selecPublisherStatusParams" v-model="params.publishStatus"></EdSelect>
            <EdDateTimeRange ref="timePicker" @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')"></EdDateTimeRange>
            
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()" ><svg-icon icon-class="reset-svg"/>重置</el-button>
        </template>
        <PageCard title="公告通知列表">
            <template #actions>
                <el-button class="ed-button ed_black-bottom" v-has="'notice:announcement:add'" @click="addOwner()"><svg-icon icon-class="add-svg"/>添加公告</el-button>
            </template>
            <ApiTable :api="noticeList" ref="table" :params="params">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="所属项目"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="noticeType" label="公告类型">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['noticeType'], data.selectNoticeTypeParams.options)}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="title" label="公告标题"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="creator" label="创建者"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="sendObject" label="发布对象"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="publishStatus" label="发布状态">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['publishStatus'], data.selecPublisherStatusParams.options)}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间"></el-table-column>
                <el-table-column width="350px" :show-overflow-tooltip="true" label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" v-has="'notice:announcement:update'" @click="update(scope.row)">编辑</el-button>
                        <el-button class="ed-table-bottom ed_delete_border" v-has="'notice:announcement:delete'" :disabled="scope.row.publishStatus==1" @click="del(scope.row)">删除</el-button>
                        <el-button class="ed-table-bottom ed_blue_border" v-has="'notice:announcement:see'" @click="checkDetail(scope.row)">查看</el-button>
                        <el-button class="ed-table-bottom ed_green_border" v-has="'notice:announcement:publish'" @click="publish(scope.row)" :disabled="scope.row.publishStatus==1">发布</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
            <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
        </PageCard>
        <EdDialog class="pubDialog" :showCloseIcon="data.showCloseIcon" :showSubmitBtn="data.showSubmitBtn" :showCloseBtn="data.showCloseBtn" :showTitle="data.pubShowTitle" :width="'220px'" v-if="data.pubDialogVisible"  @save-dialog="pubDialogSave">
            <div class="pubDiaIcon"><i class="el-icon-warning"></i></div>
            <div class="pubDiaText">发布失败</div>
            <el-button class="ed-button ed_black-bottom" @click="pubDialogSave">确定</el-button>
        </EdDialog>

        <el-dialog
            class="infoDialog" 
            title="公告详情"
            :visible.sync="data.infoDialogVisible"
            :close-on-click-modal="false"
            width="50%">
            <el-form :model="data.infoForm" ref="seeForm" :label-position="data.labelPosition" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="公告类型：" prop="noticeType">
                            <span>{{returnName(data.infoForm.noticeType, data.selectNoticeTypeParams.options)}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发布状态：" prop="publishStatus">
                            <span>{{returnName(data.infoForm.publishStatus, data.selecPublisherStatusParams.options)}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="创建者：" prop="creator">
                            <span>{{data.infoForm.creator}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="创建时间：" prop="createTime">
                            <span>{{data.infoForm.createTime}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="noticeTitleClass">
                        <el-form-item label="公告标题：">
                            <span>{{data.infoForm.title}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="noticeContentClass">
                        <el-form-item label="公告内容：">
                            <div v-html="data.infoForm.detail" style="max-height: 300px; overflow:scroll;"></div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="publisherClass">
                        <el-form-item label="发布对象：" prop="rooms">
                                <EdLazyCascader ref="edLazyCascader" checkStrictly="true" placeholder="小区/分期/楼栋/单元/房间" leafLevel="2"></EdLazyCascader>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer center">
                <!-- <el-button class="ed-button ed_delete_border" v-has="'notice:announcement:delete'" @click="del(currentRow)">删除</el-button>
                <el-button class="ed-button ed_white_bottom" v-has="'notice:announcement:update'" @click="update(currentRow)">编辑</el-button> -->
                <el-button class="ed-button ed_black-bottom" v-has="'notice:announcement:publish'" @click="publish(data.currentRow)" :disabled="data.infoForm.publishStatus==1">发布</el-button>
            </span>
        </el-dialog>
    </Page>
</template>

<script setup>
    import EdDialog from 'src/components/EdDialog.vue'
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
    import { noticeList, detailNotice, delNotice, pubNotice,getProjectList,editNotice } from "./api.js";
    import { returnName } from "src/utils/common.js";
    import { getDictByCode } from "src/api/dictionaries";
    import EdLazyCascader from 'src/components/EdLazyCascader.vue'
    import message from 'src/utils/once-message'
    import router from 'src/router'
    import { onActivated, onDeactivated, reactive, ref, nextTick } from 'vue';
    const params = reactive({
        noticeType:'',
        title:'',
        creator:'',
        villageId: '',
        publishStatus: '',
        pickerTime: [],
        startTime: '',
        endTime: '',
    })
    const data = reactive({
        pickerParams:{
            valueFormat:"yyyy-MM-dd HH:mm"
            // valueFormat:"yyyy-MM-dd"
        },
        selectNoticeTypeParams:{
            options:[
            ],
            placeholder:"请选择公告类型"
        },
        selecProjectParams:{
            options:[],
            props: {label:"villageName", value:"villageId"},
            placeholder:"请选择所属项目"
        },
        selecPublisherStatusParams:{
            options:[],
            placeholder:"请选择发布状态"
        },
        dataApi:{
            url:"/resource/room/export",
            pages:0
        },
        // 发布dialog
        pubDialogVisible: false,
        pubShowTitle: false,
        showCloseIcon: false,
        showCloseBtn: false,
        showSubmitBtn: false,
        // 查看 dialog
        currentRow: null,
        infoDialogVisible: false,
        infoForm: {
            noticeType: '',
            publishStatus: '',
            creator: '',
            createTime: '',
            title: '',
            detail: '',
            villageId: '',
            stagesId: '',
            buildingId: '',
            rooms: [],
        },
        labelPosition: 'right'
    })

    onActivated(()=>{
        // 公告类型
        getDictByCode('announcement_notice_type').then(res=>{
            data.selectNoticeTypeParams.options = res.data.items;
        })
        // 发布状态
        getDictByCode('announcement_notice_publish_status').then(res=>{
            data.selecPublisherStatusParams.options = res.data.items;
        })
        // 获取 所属项目
        getProjectList({pageSize: 999999}).then(res=>{
            data.selecProjectParams.options = res.data.records;
        })
        nextTick(()=>{
            table.value.load(1)
        })
    })
    const table = ref()
    const timePicker = ref()
    const confirmDeleteRef = ref()
    const edLazyCascader = ref()

    function search(){
        table.value.load(1)
    }
    function reset(){
        Object.assign(params, {
            noticeType:'',
            title:'',
            creator:'',
            villageId: '',
            publishStatus: '',
            pickerTime: [],
            startTime: '',
            endTime: '',
        })
        timePicker.value.reset();
        nextTick(() => {
            table.value.load(1,10)
        })
    }
    function emitEchoTimeDate(data){
        // $event 子组件$emit传的参数 
        params['startTime'] = data.startTime;
        params['endTime'] = data.endTime;
    }
    // 详情 时间
    function emitEchoTimeDate_1($event, name){
        // $event 子组件$emit传的参数 
        data.infoForm[name]=$event;
    }
    function addOwner(){
        router.push({
            path:'/notice/announcement/create'
        })
    }
    function update(row){
        data.infoDialogVisible = false;
        router.push({
            path: '/notice/announcement/create',
            query: {id:row.id}
        })
    }
    function del(row){
        data.confirmRow = row;
        confirmDeleteRef.value.open("操作确认","是否执行此操作？","warning")
    }
    function confirmDeleteTrue(){
        delNotice({id: data.confirmRow.id}).then(response => {
            if(response.code == 20000) {
                message.success({
                    message: '删除成功！',
                    duration: 2000,
                    center:true
                });
                data.infoDialogVisible = false;
                table.value.load()
            }
        })
    }
    // 查看
    function checkDetail(row){
        data.currentRow = row;
        // return
        detailNotice({id: row.id}).then(response => {
            if(response.code == 20000) {
                Object.assign(data.infoForm, {
                    id: response.data.id,
                    noticeType: response.data.noticeType.toString()||response.data.noticeType,
                    publishStatus: response.data.publishStatus.toString()||response.data.publishStatus,
                    title: response.data.title,
                    detail: response.data.detail,
                    creator: response.data.creator,
                    createTime: response.data.createTime,
                    villageId: response.data.villageId,
                    stagesId: response.data.stagesId,
                    buildingId: response.data.buildingId,
                })
                let arr = [];
                if(response.data.villageId.length) {
                    arr = arr.concat(response.data.villageId[0]&&response.data.villageId[0].toString());
                    if(response.data.stagesId.length){
                        arr = arr.concat(response.data.stagesId[0]&&response.data.stagesId[0].toString());
                        if(response.data.buildingId.length){
                            arr = arr.concat(response.data.buildingId[0]&&response.data.buildingId[0].toString());
                        }
                    }
                }
                data.infoDialogVisible=true;
                nextTick(()=>{
                    edLazyCascader.value.setVal(arr);
                })
            }
        })
    } 
    // 发布
    function publish(row){
        pubNotice({id: row.id}).then(response => {
            if(response.code == 20000) {
                message.success({
                    message: '发布成功！',
                    duration: 2000,
                    center:true
                });
                data.infoDialogVisible = false;
                table.value.load()
            }else{
                // 发布失败
                data.pubDialogVisible = true;
            }
        })
    }
    // 发布确认
    function pubDialogSave(){
        data.pubDialogVisible = false;
    }
</script>

<style lang="scss" scoped>
.noticeTitle{
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 97%;
}
:deep .pubDialog .el-dialog__body{
    padding-top: 0;
    padding-bottom: 0;

    >span{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // div{
        //     text-align: center;
        // }
        .pubDiaIcon{
            color: #E6A23C;
            font-size: 40px;
        }
        .pubDiaText{
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 22px;
            color: #606266;
        }
        .ed-button{
            width: 68px;
            margin-top: 20px;
            text-align: center;
        }
    }
}
:deep .infoDialog .el-dialog__body{
    padding: 30px 50px;
    padding-left: 60px;
    .el-form-item__content{
        // width: 80%;
        .el-date-editor{
            width: 80%;   
        }
    }

    .noticeTitleClass{
        .el-form-item__content{
            width: 79%;
        }
    }
     .noticeContentClass{
        .el-form-item__content{
            width: 79%;
        }
    }
    .publisherClass{
        .el-form-item__content{
            width: 79%;
            .el-cascader{
                width: 100%;
            }
        }
    }
}
</style>